// out: ../css/

// 导航
.bg-body-tertiary {
  background-color: transparent !important;
  .navbar-collapse {
    flex-grow: 0;
  }
}

// 轮播图: 小于768图片高度250 max；大于等于768图片高度400 min；大于等于992图片高度500
.carousel {
  // 响应式 → 媒体查询
  @media (max-width: 768px) {
    .carousel-item {
      height: 250px;
      font-weight: 100;
      color: #fff;
      text-align: center;
    }
    .up {
      margin-bottom: 10px;
      padding-top: 90px;
      line-height: 30px;
      font-size: 30px;
    }
    .down {
      margin: 0;
      line-height: 20px;
      font-size: 20px;
    }
  }

  @media (min-width: 768px) {
    .carousel-item {
      height: 400px;
      font-weight: 100;

      color: #fff;
      text-align: center;
    }

    .up {
      margin-bottom: 13px;
      padding-top: 140px;
      line-height: 50px;
      font-size: 50px;
    }
    .down {
      font-weight: 100;
      margin: 0;

      line-height: 30px;
      font-size: 30px;
    }
    
  }
  @media (min-width: 992px) {
    .carousel-item {
      height: 500px;
      font-weight: 100;
      text-align: center;
    }
    .up {
      margin-bottom: 16px;
      padding-top: 180px;
      line-height: 60px;
      font-size: 60px;
    }
    .down {
      margin: 0;
      line-height: 40px;
      font-size: 40px;
    }
  }


  


  .carousel-item {
    background-size: cover;
    background-position: center 0;
  }
  .carousel-item:nth-child(1) {
    
    background-image: url(../assets/uploads/banner_4.jpg);
  }
  .carousel-item:nth-child(2) {
    background-image: url(../assets/uploads/banner_1.jpg);
  }
  .carousel-item:nth-child(3) {
    background-image: url(../assets/uploads/banner_3.jpg);
  }

}

.viewport {
  margin-top: 60px;
  text-align: center;

  @media (max-width: 768px) {
    video {
      width: 460px;
    }
  }
  @media (min-width: 768px) {
    video {
      width: 720px;
    }
  }
  @media (min-width: 992px) {
    video {
      width: 1080px;
    }
  }
  @media (min-width: 1200px) {
    video {
      width: 1280px;
    }
  }
  @media (min-width: 1900px) {
    video {
      width: 1920px;
    }
  }
}

// 开源项目
// 视口宽度大于992；一行排4个盒子  col-lg-3
// 视口宽度大于768；一行排2个盒子  col-md-6
.project {
  margin-top: 60px;
  text-align: center;
  .row {
    div {
      margin-bottom: 10px;
      height: 200px;
      // background-color: pink;
      a {
        // 块级的宽度和父级一样大
        display: block;
        height: 200px;
        background-color: green;
        border-radius: 4px;
      }

      &:nth-child(1) a {
        background-color: #70c3ff;
      }
      &:nth-child(2) a {
        background-color: #fd6a7f;
      }
      &:nth-child(3) a {
        background-color: #7f8ea0;
      }
      &:nth-child(4) a {
        background-color: #89d04f;
      }
    }
  }
}